import "./index.css";
import { useState, useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
import * as echarts from "echarts";
import dayjs from "dayjs";
import Footernav from "../../compontens/page/Footnav/footernav";
import $ from 'jquery';
function Index() {
  const location = useLocation(); // 获取当前位置 
  const canvasRef1 = useRef(null);
  useEffect(() => {

    function background() {
      $('.box').prepend('<canvas id="canvas" style="position:absolute;z-index:-1;"></canvas>');
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const w = canvas.width = window.innerWidth;
      const h = canvas.height = window.innerHeight;

      let hue = 217;
      let stars = [];
      let count = 0;
      let maxStars = 800;

      const canvas2 = document.createElement('canvas');
      const ctx2 = canvas2.getContext('2d');
      canvas2.width = 100;
      canvas2.height = 100;
      const half = canvas2.width / 2;
      const gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
      gradient2.addColorStop(0.025, '#fff');
      gradient2.addColorStop(0.1, `hsl(${hue}, 61%, 33%)`);
      gradient2.addColorStop(0.25, `hsl(${hue}, 64%, 6%)`);
      gradient2.addColorStop(1, 'transparent');

      ctx2.fillStyle = gradient2;
      ctx2.beginPath();
      ctx2.arc(half, half, half, 0, Math.PI * 2);
      ctx2.fill();

      function random(min, max) {
        if (arguments.length < 2) {
          max = min;
          min = 0;
        }
        if (min > max) {
          const hold = max;
          max = min;
          min = hold;
        }
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      class Star {
        constructor() {
          this.orbitRadius = random(window.innerWidth / 2 - 50);
          this.radius = random(100, this.orbitRadius) / 10;
          this.orbitX = window.innerWidth / 2;
          this.orbitY = window.innerHeight / 2;
          this.timePassed = random(0, maxStars);
          this.speed = random(this.orbitRadius) / 500000;
          this.alpha = random(2, 10) / 10;
          count++;
          stars[count] = this;
        }

        draw() {
          const x = Math.sin(this.timePassed + 1) * this.orbitRadius + this.orbitX;
          const y = Math.cos(this.timePassed) * this.orbitRadius / 2 + this.orbitY;
          const twinkle = random(10);

          if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
          } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
          }

          ctx.globalAlpha = this.alpha;
          ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
          this.timePassed += this.speed;
        }
      }

      for (let i = 0; i < maxStars; i++) {
        new Star();
      }

      function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.8;
        ctx.fillStyle = `hsla(${hue}, 64%, 6%, 1)`;
        ctx.fillRect(0, 0, w, h);

        ctx.globalCompositeOperation = 'lighter';
        for (let i = 1, l = stars.length; i < l; i++) {
          stars[i].draw();
        }

        window.requestAnimationFrame(animation);
      }
      animation();
    }
    background();

    $(window).resize(() => {
      background();
    });
    console.log('Route changed, fetching new data...');
  }, [location]);
  return (
    <div className="box" ref={canvasRef1}>
      {/* <div ></div> */}
      <header></header>
      <main>
        <div className="left">
          <div className="weather">
            <div className="title">环境监测1111</div>
            <div className="cont">

            </div>
            <div className="title2">学生发布情况33333</div>
            <div className="cont1"></div>
          </div>
        </div>
        <div className="center">
          <Footernav></Footernav>
        </div>
        <div className="right">

        </div>
      </main>
    </div>
  );
}

export default Index;
